<template>
  <el-card header="Ref Block Header" class="mb-5">    
    <el-table :data="dataTable" :show-header="true" :highlight-current-row="true" :stripe="true" row-class-name="primary" style="width: 100%" @row-click="onTableRowClicked">
      <el-table-column prop="label" label="key"></el-table-column>
      <el-table-column prop="value" label="val"></el-table-column>
      <el-table-column prop="desc" label="des"></el-table-column>
    </el-table>
  </el-card>

  <reftable-ref-records :data="data?.refRecords.records" :debug="data?.refRecords._debug.records" @clicked="onTableRowClicked"></reftable-ref-records>
  <reftable-restarts :data="data" :debug="data?._debug" @clicked="onTableRowClicked"></reftable-restarts>

</template>

<script>
import ReftableRefRecords from './RefRecords.vue';
import ReftableRestarts from './Restarts.vue';
import Formater from "@/libs/tools/Formater.js";

export default {
  components: {
    ReftableRefRecords,
    ReftableRestarts,
  },
  props: {
    data: Object,
    debug: Object,
  },
  emits: ['clicked'],
  data() {
    return {
      dataTable: [],
    };
  },
  created() {
    if (this.data) {
      this.dataTable = this.covertToTable(this.data);
    }   
  },
  watch: {
    data(newVal, oldVal) {
      this.dataTable = this.covertToTable(newVal);
    },
  },
  methods: {
    covertToTable(data) {
      return [
        { 
          "label": "ref_block_flag", 
          "value": Formater.char(data.refBlockFlag), 
          "desc": "",
          "debug": data._debug.refBlockFlag,
        },
        { 
          "label": "ref_block_len", 
          "value": Formater.number(data.refBlockLen, 6), 
          "desc": "",
          "debug": data._debug.refBlockLen,
        },
      ];
    },
    
    onTableRowClicked(row, column, event) {
      this.$emit('clicked', row);
    },
  },
  mounted() {

  },
  computed: {
    
  }
};
</script>